<template>
  <div class="walletCount">
    <div class="bill_top">
      <span class="fl">{{$t('wallet.address.title')}}</span>
      <span class="fr">
        <button class="button" @click="toAdd">{{$t('wallet.address.add_address')}}</button>
      </span>
    </div>
    <div class="walletCount-top">
      <div class="bill">
        <el-table v-loading="loading" stripe :data="list" style="width: 100%" max-height="550">
          <el-table-column fixed :label="$t('wallet.address.type')" width="100">
            <template slot-scope="scope">
              <span class="tt" style="margin-left: 10px">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('wallet.address.name')" width="170">
             <template slot-scope="scope">
              <span class="tt" style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column  :label="$t('wallet.address.address')" >
             <template slot-scope="scope">
              <span class="tt" style="margin-left: 10px">{{ scope.row.address }}</span>
            </template>
          </el-table-column>
          <el-table-column  :label="$t('wallet.address.operation')" width="170">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="delAddress(scope.row)">{{$t('btn.delete')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page="page | num" :pageSize="limit | num" :totalCount="total_count | num" :disabled="loading" :sizeChange="sizeChange" :currentChange="currentChange"/>
      </div>

    </div>
  </div>
</template>
<script>
import { inviteAddress, walletAddressDel } from '@/api';
import pagination from '@/components/Pagination';
import { mapGetters } from 'vuex';

export default {
  components: { pagination },
  data() {
    return {
      list: [],
      page: 1,
      limit: 10,
      loading: false,
      total_count: 0,
    };
  },
  computed: {
    ...mapGetters(['id', 'isBingEmail', 'loginType']),
  },
  created() {
    this.inviteAddress();
  },
  methods: {
    toAdd() {
      if (!this.isBingEmail && this.loginType === 'email') {
        this.$confirm(this.$t('wallet.address.confirm_info'), this.$t('mill.tip'), {
          confirmButtonText: this.$t('btn.confirm'),
          cancelButtonText: this.$t('btn.cancel'),
          type: 'warning',
        }).then(() => {
          this.$router.push('/setup');
        }).catch(() => {});
      } else {
        this.$router.push('/wallet/add');
      }
    },
    sizeChange(limit) {
      this.limit = limit;
      this.page = 1;
      this.inviteAddress();
    },
    currentChange(page) {
      this.page = page;
      this.inviteAddress();
    },
    delAddress(v) {
      this.$confirm(this.$t('wallet.address.delete_confirm'), this.$t('mill.tip'), {
        confirmButtonText: this.$t('btn.confirm'),
        cancelButtonText: this.$t('btn.cancel'),
        confirmButtonClass: 'el-button--danger',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            walletAddressDel({ parent_uid: this.id, id: v.id }).then((res) => {
              if (res.data.status === 1) {
                this.$notify({
                  message: this.$t('api.6088'),
                  type: 'success',
                  duration: 1000,
                  showClose: false,
                });
                done();
              } else {
                this.$message.error(this.$t(`api.${res.data.errcode}`));
              }
            }).catch(() => {
              this.$message.error(this.$t('error.catchError'));
            });
          } else {
            done();
          }
        },
      }).then(() => {
        this.inviteAddress();
      }).catch(() => {});
    },
    inviteAddress() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      inviteAddress({
        parent_uid: this.id,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        if (res.data.status === 1) {
          this.total_count = res.data.count;
          this.list = res.data.data;
        } else {
          this.$message.error(this.$t(`api.${res.data.errcode}`));
        }
        this.loading = false;
      }).catch(() => {
        this.$message.error(this.$t('error.catchError'));
        this.loading = false;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.walletCount {
  > div {
    box-sizing: border-box;
  }
  .bill_top{
    height: 120px;
    line-height: 120px;
    padding: 0 60px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border: solid 1px #e0e0e0;
    background-color: #ffffff;
    border-radius: 5px;
    margin-bottom: 10px;
    span.fl{
      font-size: 14px;
      color: #70c1b3;
    }
    .button{
      border: none;
      color: #fff;
      font-size: 22px;
      display: inline-block;
      width: 200px;
      height: 50px;
      line-height: 50px;
      background-color: #70c1b3;
      box-shadow: 0px 7px 18px 0px rgba(0, 130, 108, 0.24);
      border-radius: 5px;
      &:focus{
        outline: none;
      }
    }
  }
  .walletCount-top {
    padding-left: 20px;
    padding-bottom: 15px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border: solid 1px #e0e0e0;
    background-color: #ffffff;
    border-radius: 5px;
    > p {
      text-align: left;
      &:nth-child(1) {
        height: 33px;
        line-height: 33px;
        position: relative;
        font-size: 12px;
        color: #999999;
        cursor: pointer;
        i {
          position: absolute;
          top: 48%;
          transform: translateY(-50%);
          left: -18px;
          font-size: 18px;
          color: #999999;
        }
      }
    }

    .bill {
      padding: 0 50px 30px 30px;
      box-sizing: border-box;
      margin-top: 35px;
      p {
        padding-bottom: 28px;
        text-align: left;
        font-size: 18px;
        span {
          color: #247ba0;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
